<template>
    <div class="demo-collapse box-wdemand">

        <div class="mt-4">
            <el-affix :offset="60.001">
                <el-input @keyup.enter='searchBtn' v-model="searchText" placeholder="输入搜索条件，用户名或者订单单号"
                    class="input-with-select" size="large">
                    <template #prepend>
                        <!-- <el-select v-model="searchSelect" placeholder="选择" style="width: 115px" size="large">
                        <el-option :label="item.ryD_DemandTypeName" :value="item.ryD_DemandTypeNo"
                            v-for="item in DemandTypeList" v-bind:key="item.ryD_CompanyNo" />
                    </el-select> -->
                        <span>搜索</span>
                        <!-- <el-cascader :props="DemandTypeList"  style="width: 115px" size="large"/> -->
                    </template>
                    <template #append>
                        <el-button :icon="Search" size="large" @click="searchBtn" />
                    </template>
                </el-input>
            </el-affix>
        </div>
        <!---->
        <el-collapse :accordion="accordion" style="width: 100%;height: 50vh;" @change="collChange" v-loading="loading"
            v-model="collapseModel">
            <el-card>
                <el-space fill wrap direction="vertical" style="width: 100%" v-infinite-scroll="load"
                    :infinite-scroll-disabled="disabled">
                    <el-card :class="index % 2 == 1 ? 'boder-white' : 'boder-grey'" shadow="hover"
                        v-for="(item, index) in list.demandList" v-bind:key="item.ryD_DemandId">
                        <el-collapse-item :name="item.ryD_DemandId">
                            <template #title>
                                <div style="flex:1" @click.stop>
                                    <el-descriptions class="margin-top" :title="item.ryD_UserName" :column="4">
                                        <el-descriptions-item label="类别:">{{ item.ryD_DemandTypeName }}
                                        </el-descriptions-item>
                                        <el-descriptions-item label="公司:">
                                            <span v-for="cp in companyList" :key="cp">
                                                <span v-if="cp.ryD_CompanyNo == item.ryD_Company">
                                                    {{ cp.ryD_CompanyName }}
                                                </span>
                                            </span>
                                        </el-descriptions-item>
                                        <el-descriptions-item label="事件等级:">
                                            <el-tag class="mx-1" size="large" v-if="item.ryD_Level == 1">一般</el-tag>
                                            <el-tag class="mx-1" size="large" type="info" v-if="item.ryD_Level == 2">紧急
                                            </el-tag>
                                            <el-tag class="mx-1" size="large" type="warning" v-if="item.ryD_Level == 3">
                                                严重</el-tag>
                                            <el-tag class="mx-1" size="large" type="danger" v-if="item.ryD_Level == 4">
                                                重大</el-tag>
                                        </el-descriptions-item>
                                        <el-descriptions-item label="发起时间:">
                                            {{ dateTimeSpan(item.ryD_UserStartTime) }}
                                        </el-descriptions-item>
                                        <el-descriptions-item label="IT负责人:">
                                            <span style="text-decoration:line-through;color:red;">{{ item.ryD_OldItName
                                            }}
                                            </span> {{ item.ryD_Name }}
                                        </el-descriptions-item>
                                        <el-descriptions-item label="IT联系方式:">
                                            <span style="text-decoration:line-through;color:red;">{{ item.ryD_OldItPhone
                                            }}
                                            </span> {{ item.ryD_Phone }}
                                        </el-descriptions-item>
                                        <el-descriptions-item label="订单状态:">
                                            <el-tag class="mx-1" size="large" type="danger" v-if="item.ryD_State == 1">
                                                未接单</el-tag>
                                            <el-tag class="mx-1" size="large" type="warning" v-if="item.ryD_State == 2">
                                                已接单</el-tag>
                                            <el-tag class="mx-1" size="large" type="success" v-if="item.ryD_State == 3">
                                                已处理</el-tag>
                                            <el-tag class="mx-1" size="large" type="success" v-if="item.ryD_State == 4">
                                                已评价</el-tag>
                                            <el-tag class="mx-1" size="large" type="success" v-if="item.ryD_State == 5">
                                                手动记录</el-tag>
                                            <el-tag class="mx-1" size="large" type="danger" v-if="item.ryD_State == -2">
                                                暂存</el-tag>
                                        </el-descriptions-item>
                                        <el-descriptions-item label="订单单号:">
                                            {{ item.ryD_DemandId }}
                                        </el-descriptions-item>
                                        <el-descriptions-item label="需求详情:" :span="4">
                                            <span style="font-weight: bold;">{{ item.ryD_DemandDetails }}</span>
                                        </el-descriptions-item>
                                        <el-descriptions-item label="回退原因:"
                                            v-if="item.ryD_State == -2 && item.ryD_UserId == RYD_UserId"
                                            style="color:red">
                                            {{ item.ryD_Fallback }}
                                        </el-descriptions-item>
                                    </el-descriptions>
                                </div>
                            </template>
                            <el-descriptions :column="4">
                                <template #extra>
                                    <el-button type="primary" @click="btnReceivingOrders(item)" size="large"
                                        v-if="item.ryD_State == 1 && (item.ryD_ToItId == null ? item.ryD_ItId == RYD_UserId : item.ryD_ToItId == RYD_UserId)">
                                        确认接单
                                    </el-button>
                                    <el-button type="success" @click="CompletionOrderShow = true; demandInfo = item"
                                        size="large"
                                        v-if="item.ryD_State == 2 && (item.ryD_ToItId == null ? item.ryD_ItId == RYD_UserId : item.ryD_ToItId == RYD_UserId)">
                                        确认完单
                                    </el-button>
                                    <el-button type="success" @click="showSolution = true; demandInfo = item"
                                        size="large" v-if="item.ryD_State == 3 && item.ryD_UserId == RYD_UserId">
                                        前往评价
                                    </el-button>
                                    <el-button type="danger" plain @click="btnCancelOrder(item)"
                                        v-if="item.ryD_State == 1 && item.ryD_UserId == RYD_UserId">
                                        撤销订单
                                    </el-button>
                                    <el-button type="warning" plain @click="btnEditOrders(item.ryD_DemandId)"
                                        v-if="item.ryD_State == -2 && item.ryD_UserId == RYD_UserId">
                                        编辑需求
                                    </el-button>
                                    <el-button type="danger" plain @click="btnDeleteOrder(item)"
                                        v-if="item.ryD_State == -2 && item.ryD_UserId == RYD_UserId">
                                        删除需求订单
                                    </el-button>
                                    <el-button type="warning" plain
                                        @click="showLevelOrder = true; demandInfo = item; selectLevelOrder = item.ryD_Level"
                                        v-if="item.ryD_State == 1 && (item.ryD_ToItId == null ? item.ryD_ItId == RYD_UserId : item.ryD_ToItId == RYD_UserId)">
                                        调整级别
                                    </el-button>
                                    <el-button type="warning" plain @click="btnUpdateTypeOrder(item)"
                                        v-if="item.ryD_State == 1 && (item.ryD_ToItId == null ? item.ryD_ItId == RYD_UserId : item.ryD_ToItId == RYD_UserId)">
                                        修改类别
                                    </el-button>
                                    <el-button type="danger" plain @click="showFallback = true; demandInfo = item"
                                        v-if="item.ryD_State == 1 && (item.ryD_ToItId == null ? item.ryD_ItId == RYD_UserId : item.ryD_ToItId == RYD_UserId)">
                                        回退订单
                                    </el-button>
                                    <el-button type="warning" plain @click="btnTransferOrders(item)"
                                        v-if="item.ryD_State == 1 && (item.ryD_ToItId == null ? item.ryD_ItId == RYD_UserId : item.ryD_ToItId == RYD_UserId)">
                                        确认转单
                                    </el-button>
                                    <el-button type="warning" plain @click="btnCompanyTransferOrders(item)"
                                        v-if="item.ryD_State == 1 && (item.ryD_ToItId == null ? item.ryD_ItId == RYD_UserId : item.ryD_ToItId == RYD_UserId)">
                                        跨公司转单
                                    </el-button>
                                </template>

                                <el-descriptions-item :span="4" label="图片附件:" v-if="item.ryD_Files">
                                    <el-space direction="vertical" alignment="flex-start">
                                        <el-skeleton style="width: 240px" :loading="loadingInfo" animated>
                                            <template #template>
                                                <el-skeleton-item variant="image" style="width: 100px; height: 100px" />
                                                <div style="padding: 14px">
                                                    <el-skeleton-item variant="h3" style="width: 50%" />
                                                    <div
                                                        style=" display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px; ">
                                                        <el-skeleton-item variant="text" style="margin-right: 16px" />
                                                        <el-skeleton-item variant="text" style="width: 30%" />
                                                    </div>
                                                </div>
                                            </template>
                                            <template #default>
                                                <el-image style="width: 100px; height: 100px" :src="items" fit="contain"
                                                    v-for="(items, index) in item.files" :key="index"
                                                    :preview-src-list="item.files" :initial-index="index" />
                                            </template>
                                        </el-skeleton>
                                    </el-space>
                                </el-descriptions-item>
                                <el-space direction="vertical" alignment="flex-start">
                                    <el-skeleton style="width: 240px" :loading="loadingInfo" animated>
                                        <template #template>
                                            <el-skeleton-item variant="image" style="width: 100px; height: 100px" />
                                            <div style="padding: 14px">
                                                <el-skeleton-item variant="h3" style="width: 50%" />
                                                <div
                                                    style=" display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px; ">
                                                    <el-skeleton-item variant="text" style="margin-right: 16px" />
                                                    <el-skeleton-item variant="text" style="width: 30%" />
                                                </div>
                                            </div>
                                        </template>
                                        <template #default>
                                            <el-image style="width: 100px; height: 100px" :src="items" fit="contain"
                                                v-for="(items, index) in item.files" :key="index"
                                                :preview-src-list="item.files" :initial-index="index" />
                                        </template>
                                    </el-skeleton>
                                </el-space>
                                <el-descriptions-item label="用户联系方式:" v-if="item.ryD_UserPhone">{{ item.ryD_UserPhone }}
                                </el-descriptions-item>
                                <el-descriptions-item label="用户位置:" v-if="item.ryD_UserAddress">{{ item.ryD_UserAddress
                                }}
                                </el-descriptions-item>
                                <el-descriptions-item label="用户IP地址:" v-if="item.ryD_UserIp">{{ item.ryD_UserIp }}
                                </el-descriptions-item>
                                <el-descriptions-item label="是否转单:" v-if="item.ryD_ToItId">{{ item.ryD_ToItId ==
                                        null ? '否' : '已转单'
                                }}
                                </el-descriptions-item>

                                <el-descriptions-item label="接单时间:" v-if="item.ryD_ItStartTime">{{
                                        dateTimeSpan(item.ryD_ItStartTime)
                                }}</el-descriptions-item>
                                <el-descriptions-item label="处理完成时间:" v-if="item.ryD_ItEndTime">{{
                                        dateTimeSpan(item.ryD_ItEndTime)
                                }}
                                </el-descriptions-item>
                                <el-descriptions-item label="用户确认时间:" v-if="item.ryD_UserEndTime">{{
                                        dateTimeSpan(item.ryD_UserEndTime)
                                }}</el-descriptions-item>
                                <el-descriptions-item :span="4" v-if="item.ryD_UserEndTime"></el-descriptions-item>

                                <el-descriptions-item label="问题原因:" :span="4" v-if="item.ryD_Reason">
                                    {{ item.ryD_Reason }}
                                </el-descriptions-item>
                                <el-descriptions-item label="解决方案:" :span="4" v-if="item.ryD_Solution">
                                    {{ item.ryD_Solution }}
                                </el-descriptions-item>
                                <el-descriptions-item label="是否加入知识库:" :span="4" v-if="item.ryD_Solution">
                                    {{ (item.ryD_KBId == null) ? '否' : '是' }}
                                </el-descriptions-item>
                                <el-descriptions-item label="评价星级:" :span="4" v-if="item.ryD_Star">
                                    <el-image src="/img/pinLunXinSelect.png" style="width: 30px;"
                                        v-for="index in (item.ryD_Star == null ? 0 : item.ryD_Star)" :key="index">
                                    </el-image>
                                    <el-image src="/img/pinLunXin.png" style="width: 30px;"
                                        v-for="index in (item.ryD_Star == null ? 5 : 5 - item.ryD_Star)" :key="index">
                                    </el-image>
                                </el-descriptions-item>
                                <el-descriptions-item label="评论内容:" :span="4" v-if="item.ryD_Evaluate">
                                    {{ item.ryD_Evaluate }}
                                </el-descriptions-item>

                            </el-descriptions>
                        </el-collapse-item>
                    </el-card>
                    <el-card v-if="list.demandList.length == 0">
                        <span>暂无需求</span>
                    </el-card>
                </el-space>
            </el-card>
        </el-collapse>

        <!-- 完单 -->
        <el-dialog v-model="CompletionOrderShow" title="处理信息" :close-on-click-modal='false'>
            <el-form label-position="top" label-width="100px" :model="formCompletionOrder" ref="refCompletionOrder"
                style="max-width: 460px" :rules="rules">
                <el-form-item label="问题原因：" prop="ryD_Reason">
                    <el-input type="textarea" v-model="formCompletionOrder.ryD_Reason" :rows="3" />
                </el-form-item>
                <el-form-item label="解决方案：" prop="ryD_Solution">
                    <el-input type="textarea" v-model="formCompletionOrder.ryD_Solution" :rows="3" />
                </el-form-item>
                <el-form-item label="是否加入知识库：">
                    <el-switch v-model="formCompletionOrder.ryD_KBId" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="CompletionOrderShow = false">取消</el-button>
                    <el-button type="primary" @click="onCompletionOrder(refCompletionOrder)">确定</el-button>
                </span>
            </template>
        </el-dialog>
        <el-dialog v-model="showLevelOrder" title="调整级别" :close-on-click-modal='false'>

            <el-radio-group v-model="selectLevelOrder">
                <el-radio :label="1" border>
                    一般</el-radio>
                <el-radio :label="2" border>
                    紧急</el-radio>
                <el-radio :label="3" border>
                    严重</el-radio>
                <el-radio :label="4" border>
                    重大</el-radio>
            </el-radio-group>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="showLevelOrder = false">取消</el-button>
                    <el-button type="primary" @click="onLevelOrder(item)">确定</el-button>
                </span>
            </template>
        </el-dialog>
        <el-dialog v-model="showTypeOrder" title="修改类别" :close-on-click-modal='false'>

            <el-select v-model="selectTypeOrder">
                <el-option v-for="item in DemandTypeList" :key="item.ryD_DemandTypeNo" :label="item.ryD_DemandTypeName"
                    :value="item.ryD_DemandTypeNo" />
            </el-select>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="showTypeOrder = false">取消</el-button>
                    <el-button type="primary" @click="onTypeOrder">确定</el-button>
                </span>
            </template>
        </el-dialog>
        <el-dialog v-model="showFallback" title="回退信息" :close-on-click-modal='false'>
            <el-form label-position="top" label-width="100px" :model="formFallbackOrder" ref="refFallbackOrder"
                style="max-width: 460px" :rules="fRules">
                <el-form-item label="回退原因：" prop="RYD_Fallback">
                    <el-input type="textarea" v-model="formFallbackOrder.RYD_Fallback" :rows="3" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="showFallback = false">取消</el-button>
                    <el-button type="primary" @click="onFallbackOrder(refFallbackOrder)">确定</el-button>
                </span>
            </template>
        </el-dialog>

        <el-dialog v-model="showTransferOrders" title="转单人员" :close-on-click-modal='false'>

            <!-- <el-radio-group v-model="selectTransferOrders">
                <el-radio :label="item.id" v-for="(item, index) in columnsTransferOrders" v-bind:key="index" border>
                    {{ item.cityName }}</el-radio>
            </el-radio-group> -->
            <el-cascader v-model="selectTransferOrders" :options="columnsTransferOrders" style="width:400px" />
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="showTransferOrders = false">取消</el-button>
                    <el-button type="primary" @click="onTransferOrders">确定</el-button>
                </span>
            </template>
        </el-dialog>
        <el-dialog v-model="showCompanyTransferOrders" title="转单公司" :close-on-click-modal='false'>

            <el-cascader v-model="selectCompanyTransferOrders" :options="columnsCompanyTransferOrders" />
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="showCompanyTransferOrders = false">取消</el-button>
                    <el-button type="primary" @click="onCompanyTransferOrders">确定</el-button>
                </span>
            </template>
        </el-dialog>

        <el-dialog v-model="showSolution" title="处理评价" :close-on-click-modal='false'>
            <el-form :model="SolutionForm" ref="refSolution">
                <el-form-item label="评价星级：">
                    <el-image src="/img/pinLunXinSelect.png" style="width: 30px;curso r: pointer;"
                        @click="btnImage(index)"
                        v-for="index in (SolutionForm.RYD_Star == null ? 0 : SolutionForm.RYD_Star)" :key="index">
                    </el-image>
                    <el-image src="/img/pinLunXin.png" style="width: 30px;cursor: pointer;"
                        @click="btnImage((SolutionForm.RYD_Star == null ? 0 : SolutionForm.RYD_Star) + index)"
                        v-for="index in (SolutionForm.RYD_Star == null ? 5 : 5 - SolutionForm.RYD_Star)" :key="index">
                    </el-image>
                </el-form-item>

                <el-form-item label="评价内容：" prop="RYD_Evaluate">
                    <el-input type="textarea" v-model="SolutionForm.RYD_Evaluate" :rows="3" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="showSolution = false">取消</el-button>
                    <el-button type="primary" @click="onSolution(refSolution)">提交</el-button>
                </span>
            </template>
        </el-dialog>

        <el-dialog v-model="showEdit" :destroy-on-close="true" title="需求编辑" :close-on-click-modal='false' fullscreen>
            <WindowsAddDemandVue :editDemandId="editDemandId"></WindowsAddDemandVue>
        </el-dialog>
    </div>
</template>

<script setup >
import WindowsAddDemandVue from './WindowsAddDemand.vue';
// eslint-disable-next-line no-unused-vars
import { Search, Collection, Avatar, Document, Management } from '@element-plus/icons-vue'
import { inject, reactive, ref, watch } from 'vue';
import axios from '@/utils/axios';
import dateTimeSpan from '@/utils/dateTime';
// eslint-disable-next-line no-unused-vars
import { useRoute, useRouter } from 'vue-router';
import { ElLoading, ElMessageBox, ElNotification } from 'element-plus';

const route = useRoute();

let collapseModel = ref([]);
let loading = ref(true);
let showEdit = ref(false);
let showFallback = ref(false);
let disabled = ref(true);
let RYD_UserId = inject('RYD_UserId');
let isDemandNum = inject('isDemandNum');
let activeState = ref(['1']);
let RYD_Company = ref();
let companyList = ref();
let searchText = ref('');
let editDemandId = ref('');
let selectLevelOrder = ref('');
// let searchSelect = ref(0);
const loadingInfo = ref(false)
const CompletionOrderShow = ref(false)
const showTransferOrders = ref(false)
const showLevelOrder = ref(false)
const showTypeOrder = ref(false)
const formCompletionOrder = ref({
    ryD_Reason: '',
    ryD_Solution: '',
    ryD_KBId: false
})
const formFallbackOrder = ref({
    RYD_Fallback: "",
})
let columnsTransferOrders = ref([]);
let selectTransferOrders = ref('');
let selectTypeOrder = ref('');
const showCompanyTransferOrders = ref(false)
let selectCompanyTransferOrders = ref('');
let columnsCompanyTransferOrders = ref([]);
const showSolution = ref(false)
const refSolution = ref()
const refCompletionOrder = ref()
const refFallbackOrder = ref()

let SolutionForm = ref({
    RYD_Star: 5,
    RYD_Solution: ''
})
let accordion = ref(true);
let DemandTypeList = ref([]);

let btnImage = (res) => {
    SolutionForm.value.RYD_Star = res;
}
if (route.query.type != null) {
    activeState.value = [route.query.type]
}
if (activeState.value.indexOf('1') >= 0) {
    accordion.value = false;
}
watch(activeState, () => {
    if (activeState.value.indexOf('1') >= 0) {
        accordion.value = false;
    } else {
        accordion.value = true;
    }
})
let rules = reactive({
    ryD_Reason: [
        { required: true, message: '请输入问题原因', trigger: 'blur' },
    ],
    ryD_Solution: [
        { required: true, message: '请输入解决方案', trigger: 'blur' },
    ],
})
let fRules = reactive({
    RYD_Fallback: [
        { required: true, message: '请输入回退原因', trigger: 'blur' },
    ],
})
// let rulesSolution = reactive({
//     RYD_Evaluate: [
//         { required: true, message: '请输入评论内容', trigger: 'blur' },
//     ],
// })
let removeItem = (id) => {
    for (let i = 0; i < list.value.demandList.length; i++) {

        if (list.value.demandList[i].ryD_DemandId == id) {
            list.value.demandList.splice(i, 1)
            break;
        }
    }
}

let onLevelOrder = () => {
    const loading = ElLoading.service({
        lock: true,
        text: '提交中',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    showLevelOrder.value = false;
    axios({
        method: 'put',
        url: "/api/setLevelOrder",
        data: {
            RYD_ItId: RYD_UserId,
            RYD_DemandId: demandInfo.value.ryD_DemandId,
            RYD_Level: selectLevelOrder.value
        }
    }).then(res => {
        loading.close();
        if (res == true) {
            ElNotification({
                title: '提示',
                message: '调整成功',
                type: 'success',
            })
            list.value.demandList.forEach(element => {
                if (element.ryD_DemandId == demandInfo.value.ryD_DemandId) {
                    demandInfo.value.ryD_Level = selectLevelOrder.value;
                    element.ryD_Level = selectLevelOrder.value;
                }
            });

        } else {
            ElNotification({
                title: '提示',
                message: '失败',
                type: 'error',
            })
        }

    }).catch(() => {
        loading.close();
        ElNotification({
            title: '提示',
            message: '失败',
            type: 'error',
        })
    })
}

let onTypeOrder = () => {
    const loading = ElLoading.service({
        lock: true,
        text: '提交中',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    showTypeOrder.value = false;
    axios({
        method: 'put',
        url: "/api/UpdateTypeOrder",
        data: {
            RYD_UserId: RYD_UserId,
            RYD_DemandId: demandInfo.value.ryD_DemandId,
            RYD_ToType: selectTypeOrder.value
        }
    }).then(res => {
        loading.close();
        if (res == true) {
            ElNotification({
                title: '提示',
                message: '调整成功',
                type: 'success',
            })
            list.value.demandList.forEach(element => {
                if (element.ryD_DemandId == demandInfo.value.ryD_DemandId) {
                    let text = DemandTypeList.value.find(item=>item.ryD_DemandTypeNo==selectTypeOrder.value).ryD_DemandTypeName;
                    demandInfo.value.ryD_TypeId = selectTypeOrder.value;
                    element.ryD_TypeId = selectTypeOrder.value;
                    element.ryD_DemandTypeName = text;
                    demandInfo.value.ryD_DemandTypeName = text;
                }
            });

        } else {
            ElNotification({
                title: '提示',
                message: '失败',
                type: 'error',
            })
        }

    }).catch(() => {
        loading.close();
        ElNotification({
            title: '提示',
            message: '失败',
            type: 'error',
        })
    })
}
//接单功能
let btnReceivingOrders = (demandInfo) => {
    ElMessageBox.confirm(
        '确认接取该订单吗？',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {

        const loading = ElLoading.service({
            lock: true,
            text: '提交中',
            background: 'rgba(0, 0, 0, 0.7)',
        })
        axios({
            method: 'put',
            url: "/api/ReceivingOrders",
            data: {
                RYD_UserId: RYD_UserId,
                RYD_DemandId: demandInfo.ryD_DemandId
            }
        }).then(res => {
            loading.close();
            if (res == true) {
                ElNotification({
                    title: '提示',
                    message: '接单成功',
                    type: 'success',
                })
                removeItem(demandInfo.ryD_DemandId);
                isDemandNum.isDemandNum = isDemandNum.isDemandNum == 1 ? 2 : 1;
            } else {
                ElNotification({
                    title: '提示',
                    message: '失败',
                    type: 'error',
                })
            }

        }).catch(() => {
            loading.close();
            ElNotification({
                title: '提示',
                message: '失败',
                type: 'error',
            })
        })
        // on confirm
    }).catch(() => {
        // on cancel
    });
}
//完单功能
let onCompletionOrder = (formEl) => {
    if (!formEl) return;
    formEl.validate((valid) => {
        if (valid) {
            const loading = ElLoading.service({
                lock: true,
                text: '提交中',
                background: 'rgba(0, 0, 0, 0.7)',
            })
            CompletionOrderShow.value = false;

            axios({
                method: 'put',
                url: "/api/CompletionOrder",
                data: {
                    RYD_UserId: RYD_UserId,
                    RYD_DemandId: demandInfo.value.ryD_DemandId,
                    RYD_Reason: formCompletionOrder.value.ryD_Reason,
                    RYD_Solution: formCompletionOrder.value.ryD_Solution,
                    RYD_KBId: formCompletionOrder.value.ryD_KBId + "",
                    RYD_Company: RYD_Company.value
                }
            }).then(res => {
                loading.close();
                if (res == true) {
                    ElNotification({
                        title: '提示',
                        message: '完单成功',
                        type: 'success',
                    })
                    removeItem(demandInfo.value.ryD_DemandId);
                    isDemandNum.isDemandNum = isDemandNum.isDemandNum == 1 ? 2 : 1;
                } else {
                    ElNotification({
                        title: '提示',
                        message: '失败',
                        type: 'error',
                    })
                }

            }).catch(() => {
                loading.close();
                ElNotification({
                    title: '提示',
                    message: '失败',
                    type: 'error',
                })
            })
        }
    })
}
let btnEditOrders = (id) => {
    editDemandId.value = id;
    showEdit.value = true;
}
let btnUpdateTypeOrder = (item) => {
    showTypeOrder.value = true;
    demandInfo.value = item;
    selectTypeOrder.value = item.ryD_TypeId;
    if (DemandTypeList.value.length == 0) {
        axios({
            method: 'get',
            url: '/api/DemandType?RYD_Company=' + item.ryD_Company
        }).then(resT => {
            DemandTypeList.value = resT;
        })
    }
}
//退单功能
let onFallbackOrder = (formEl) => {
    if (!formEl) return;
    formEl.validate((valid) => {
        if (valid) {
            const loading = ElLoading.service({
                lock: true,
                text: '提交中',
                background: 'rgba(0, 0, 0, 0.7)',
            })
            showFallback.value = false;

            axios({
                method: 'put',
                url: "/api/FallbackOrder",
                data: {
                    RYD_UserId: RYD_UserId,
                    RYD_DemandId: demandInfo.value.ryD_DemandId,
                    RYD_Fallback: formFallbackOrder.value.RYD_Fallback,
                    RYD_Company: RYD_Company.value
                }
            }).then(res => {
                loading.close();
                if (res == true) {
                    ElNotification({
                        title: '提示',
                        message: '回退成功',
                        type: 'success',
                    })
                    removeItem(demandInfo.value.ryD_DemandId);
                    isDemandNum.isDemandNum = isDemandNum.isDemandNum == 1 ? 2 : 1;
                } else {
                    ElNotification({
                        title: '提示',
                        message: '失败',
                        type: 'error',
                    })
                }

            }).catch(() => {
                loading.close();
                ElNotification({
                    title: '提示',
                    message: '失败',
                    type: 'error',
                })
            })
        }
    })
}

//撤销功能
let btnCancelOrder = (demandInfo) => {
    ElMessageBox.confirm(
        '确认撤销该订单吗？',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        const loading = ElLoading.service({
            lock: true,
            text: '提交中',
            background: 'rgba(0, 0, 0, 0.7)',
        })
        axios({
            method: 'put',
            url: "/api/CancelOrder",
            data: {
                RYD_UserId: RYD_UserId,
                RYD_DemandId: demandInfo.ryD_DemandId
            }
        }).then(res => {
            loading.close();
            if (res == true) {
                ElNotification({
                    title: '提示',
                    message: '撤销成功，请前往暂存查看',
                    type: 'success',
                })
                removeItem(demandInfo.ryD_DemandId);
                isDemandNum.isDemandNum = isDemandNum.isDemandNum == 1 ? 2 : 1;
            } else {
                ElNotification({
                    title: '提示',
                    message: '失败',
                    type: 'error',
                })
            }

        }).catch(() => {
            loading.close();
            ElNotification({
                title: '提示',
                message: '失败',
                type: 'error',
            })
        })
        // on confirm
    }).catch(() => {
        // on cancel
    });
}
//删除功能
let btnDeleteOrder = (demandInfo) => {
    ElMessageBox.confirm(
        '确认删除该订单吗？',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        const loading = ElLoading.service({
            lock: true,
            text: '提交中',
            background: 'rgba(0, 0, 0, 0.7)',
        })
        axios({
            method: 'put',
            url: "/api/DeleteOrder",
            data: {
                RYD_UserId: RYD_UserId,
                RYD_DemandId: demandInfo.ryD_DemandId
            }
        }).then(res => {
            loading.close();
            if (res == true) {
                ElNotification({
                    title: '提示',
                    message: '删除成功',
                    type: 'success',
                })
                removeItem(demandInfo.ryD_DemandId);
                isDemandNum.isDemandNum = isDemandNum.isDemandNum == 1 ? 2 : 1;
            } else {
                ElNotification({
                    title: '提示',
                    message: '失败',
                    type: 'error',
                })
            }

        }).catch(() => {
            loading.close();
            ElNotification({
                title: '提示',
                message: '失败',
                type: 'error',
            })
        })
        // on confirm
    }).catch(() => {
        // on cancel
    });
}
//显示转单人员
let btnTransferOrders = (items) => {
    showTransferOrders.value = true;
    demandInfo.value = items;
    if (columnsTransferOrders.value.length == 0) {

        axios({
            method: 'get',
            url: '/api/GetTransferOrdersUsers?RYD_Company=' + demandInfo.value.ryD_Company
        }).then(resUser => {
            var value = [];
            resUser.forEach(element => {
                let children = [];
                element.children.forEach(item => {
                    if (item.ryD_UserId != RYD_UserId) {
                        children.push({
                            value: item.ryD_UserId, label: "姓名：" + item.ryD_UserName + "，正在处理单数：" + item.num + ""
                        })
                    }
                })
                if (children.length > 0) {
                    value.push({ value: element.ryD_TypeNo, label: "类别：" + element.ryD_TypeName, children: children });
                }
            });
            columnsTransferOrders.value = value;
            // loadingTransferOrders.value = false;
        })

    }
}
//转单功能
let onTransferOrders = () => {
    if (selectTransferOrders.value == null || selectTransferOrders.value == "") {

        ElNotification({
            title: '提示',
            message: '请选择IT人员',
            type: 'error',
        })
        return;
    }
    const loading = ElLoading.service({
        lock: true,
        text: '提交中',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    axios({
        method: 'put',
        url: "/api/TransferOrders",
        data: {
            RYD_UserId: RYD_UserId,
            RYD_DemandId: demandInfo.value.ryD_DemandId,
            RYD_ToUserId: selectTransferOrders.value[1],
            RYD_ToType: selectTransferOrders.value[0]
        }
    }).then(res => {
        loading.close()
        if (res == true) {
            ElNotification({
                title: '提示',
                message: '转单成功',
                type: 'success',
            })
            showTransferOrders.value = false;
            removeItem(demandInfo.value.ryD_DemandId);
            isDemandNum.isDemandNum = isDemandNum.isDemandNum == 1 ? 2 : 1;
        } else {
            ElNotification({
                title: '提示',
                message: '失败',
                type: 'error',
            })
        }

    }).catch(() => {
        loading.close();
        ElNotification({
            title: '提示',
            message: '失败',
            type: 'error',
        })
    })
}
//显示公司转单人员
let btnCompanyTransferOrders = (items) => {
    showCompanyTransferOrders.value = true;
    demandInfo.value = items;
    if (columnsCompanyTransferOrders.value.length == 0) {

        axios({
            method: 'get',
            url: '/api/GetCompanyTransferOrdersUsers?RYD_Company=' + demandInfo.value.ryD_Company
        }).then(resUser => {
            var value = [];
            resUser.forEach(element => {
                if (element.ryD_CompanyNo != demandInfo.value.ryD_Company) {
                    let children = [];
                    element.childrenT1.forEach(item => {
                        children.push({
                            value: item.ryD_TypeNo, label: item.ryD_TypeName
                        })
                    })
                    if (children.length > 0) {
                        value.push({ value: element.ryD_CompanyNo, label: element.ryD_CompanyName, children: children });
                    }
                }
            });
            columnsCompanyTransferOrders.value = value;
            // loadingTransferOrders.value = false;
        })
        // const loading = ElLoading.service({
        //     lock: true,
        //     text: '提交中',
        //     background: 'rgba(0, 0, 0, 0.7)',
        // })
        // axios({
        //     method: 'get',
        //     url: '/api/SetCompany',
        // }).then(res => {
        //     if (res != null) {
        //         res.forEach(item => {
        //             if (item.ryD_CompanyNo != items.ryD_Company) {
        //                 let children = [];
        //                 axios({
        //                     method: 'get',
        //                     url: '/api/DemandType?RYD_Company=' + item.ryD_CompanyNo
        //                 }).then(resType => {
        //                     resType.forEach(element => {
        //                         children.push({ value: element.ryD_DemandTypeNo, label: element.ryD_DemandTypeName });
        //                     });
        //                     columnsCompanyTransferOrders.value.push({ value: item.ryD_CompanyNo, label: item.ryD_CompanyName, children: children })
        //                 })
        //             }
        //         })

        //     }
        // })
    }
}
//转单公司功能
let onCompanyTransferOrders = () => {
    if (selectCompanyTransferOrders.value == null || selectCompanyTransferOrders.value == "") {

        ElNotification({
            title: '提示',
            message: '请选择将订单转移给哪个站点',
            type: 'error',
        })
        return;
    }

    const loading = ElLoading.service({
        lock: true,
        text: '提交中',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    axios({
        method: 'put',
        url: "/api/CompanyTransferOrders",
        data: {
            RYD_UserId: RYD_UserId,
            RYD_DemandId: demandInfo.value.ryD_DemandId,
            RYD_ToCompany: selectCompanyTransferOrders.value[0],
            RYD_ToType: selectCompanyTransferOrders.value[1],
        }
    }).then(res => {
        loading.close();
        if (res == true) {
            ElNotification({
                title: '提示',
                message: '转单公司成功',
                type: 'success',
            })
            showCompanyTransferOrders.value = false;
            removeItem(demandInfo.value.ryD_DemandId);
            isDemandNum.isDemandNum = isDemandNum.isDemandNum == 1 ? 2 : 1;
        } else {
            ElNotification({
                title: '提示',
                message: '失败',
                type: 'error',
            })
        }

    }).catch(() => {
        loading.close();
        ElNotification({
            title: '提示',
            message: '失败',
            type: 'error',
        })
    })
}
//前往评价
let onSolution = (formEl) => {
    if (!formEl) return;
    formEl.validate((valid) => {
        if (valid) {
            if (SolutionForm.value.RYD_Star < 2 && (SolutionForm.value.RYD_Evaluate == "" || SolutionForm.value.RYD_Evaluate == null)) {

                ElNotification({
                    title: '提示',
                    message: '请填写低分原因',
                    type: 'error',
                })
                return;
            }
            const loading = ElLoading.service({
                lock: true,
                text: '提交中',
                background: 'rgba(0, 0, 0, 0.7)',
            })
            axios({
                method: 'put',
                url: "/api/EvaluationOrder",
                data: {
                    RYD_UserId: RYD_UserId,
                    RYD_DemandId: demandInfo.value.ryD_DemandId,
                    RYD_Star: SolutionForm.value.RYD_Star,
                    RYD_Evaluate: SolutionForm.value.RYD_Evaluate
                }
            }).then(res => {
                loading.close();
                if (res == true) {
                    ElNotification({
                        title: '提示',
                        message: '评价成功',
                        type: 'success',
                    })
                    showSolution.value = false;
                    removeItem(demandInfo.value.ryD_DemandId);
                    isDemandNum.isDemandNum = isDemandNum.isDemandNum == 1 ? 2 : 1;
                } else {
                    ElNotification({
                        title: '提示',
                        message: '失败',
                        type: 'error',
                    })
                }

            }).catch(() => {
                loading.close();
                ElNotification({
                    title: '提示',
                    message: '失败',
                    type: 'error',
                })
            })
            return;
        }
    })
}

//监听地址栏参数变化，区分订单状态
watch(route, () => {
    collapseModel.value = [];
    if (route.query.type != null) {
        activeState.value = [route.query.type];
        list.value.demandList = [];
        M_DemandList.value.Page = 1;
        M_DemandList.value.RYD_State = activeState.value;

        // let defAction = inject('defAction');
        // defAction.value="WindowsDemandList_"+route.query.type;
    }
    getDemandList();
})
// let files = ref([]);
//定义请求转递参数
let M_DemandList = ref({
    RYD_UserId: RYD_UserId,
    RYD_State: activeState.value,
    RYD_Company: RYD_Company.value,
    Sum: -1,
    Page: 1,
    Size: 20,
    DemandList: [],
    RYD_DemandId: 0,
    RYD_UserName: '',
    StartDateTime: new Date('2021-01-01'),
    EndDateTime: new Date('2090-01-01'),
    SortField: "RYD_DemandList.RYD_Level desc ,RYD_DemandList.RYD_UserStartTime",
    SortFun: "",
});
//定义订单字段
let demandInfo = ref({
    ryD_Company: null,
    ryD_CreateBy: null,
    ryD_CreateTime: null,
    ryD_DemandDetails: null,
    ryD_DemandId: null,
    ryD_Evaluate: null,
    ryD_Files: null,
    ryD_Id: null,
    ryD_ItEndTime: null,
    ryD_ItId: null,
    ryD_ItStartTime: null,
    ryD_KBId: null,
    ryD_Level: null,
    ryD_ModifyBy: null,
    ryD_ModifyTime: null,
    ryD_Reason: null,
    ryD_Solution: null,
    ryD_Star: null,
    ryD_State: null,
    ryD_ToItId: null,
    ryD_TypeId: null,
    ryD_UserAddress: null,
    ryD_UserEndTime: null,
    ryD_UserId: null,
    ryD_UserIp: null,
    ryD_UserName: null,
    ryD_UserPhone: null,
    ryD_UserStartTime: null,
});
//存储图片地址
// let files = ref([]);
//存储订单列表
let list = ref({
    demandList: []
});

//搜索功能
let searchBtn = () => {
    list.value.demandList = [];
    M_DemandList.value.Page = 1;
    getDemandList();
}
//触底加载
let load = () => {
    getDemandList();
}
//点击订单查看详情
let collChange = (item) => {
    if (item == "") { return }
    list.value.demandList.forEach(element => {
        if (element.ryD_DemandId == item) {

            if (element.ryD_Files != null) {
                element.files = element.ryD_Files.split('|');
            }
            demandInfo.value = element;
        }
    });
    // axios({
    //     method: 'get',
    //     url: '/api/DemandInfo?RYD_DemandId=' + item
    // }).then(res => {
    //     demandInfo.value = res;
    //     if (demandInfo.value.ryD_Files != null) {
    //         files.value = demandInfo.value.ryD_Files.split('|');
    //     }
    //     selectLevelOrder.value=demandInfo.value.ryD_Level;
    //     loadingInfo.value = false;
    // })
}
//获取订单列表
let getDemandList = () => {
    loading.value = true;
    disabled.value = true;
    var numReg = /^[0-9]+$/

    var numRe = new RegExp(numReg)
    if (!numRe.test(searchText.value)) {
        M_DemandList.value.RYD_DemandId = undefined;
        M_DemandList.value.RYD_UserName = searchText.value;
    } else {
        M_DemandList.value.RYD_DemandId = searchText.value;
    }
    axios({
        method: 'post',
        url: '/api/DemandList',
        data: {
            ...M_DemandList.value
        }
    }).then(listres => {
        loading.value = false;
        disabled.value = false;
        // if (listres.demandList.length < 1) {
        //     finished.value = true;
        // }
        // finished.value = true;
        if (listres.demandList.length < 1) {
            disabled.value = true;
        }
        if (M_DemandList.value.RYD_State.indexOf('1') >= 0) {
            listres.demandList.forEach(element => {
                collapseModel.value.push(element.ryD_DemandId);
                if (element.ryD_Files != null) {
                    element.files = element.ryD_Files.split('|');
                }
            });
        }
        list.value.demandList.push(...listres.demandList);
    })
    M_DemandList.value.Page += 1;
}
//页面初始化，获取基本信息
let initData = () => {
    Promise.all(
        [
            axios({
                method: 'get',
                url: '/api/GetCompany?RYD_UserId=' + RYD_UserId
            }).then(res => {
                RYD_Company.value = res;
                M_DemandList.value.RYD_Company = res;
                // listCheck.value = true;
                getDemandList();
                disabled.value = false;
                // getDemandNum();
                // axios({
                //     method: 'get',
                //     url: '/api/DemandType?RYD_Company=' + res
                // }).then(resT => {
                //     DemandTypeList.value.push({
                //         ryD_DemandTypeName: '全部', ryD_DemandTypeNo: 0, ryD_UserId: null, ryD_Company: null
                //     })
                //     DemandTypeList.value.push(...resT);
                // })
            }),
            axios({
                method: 'get',
                url: '/api/SetCompany'
            }).then(res => {
                companyList.value = res;
            }),
        ]
    ).then(() => {

    })

}
initData();
</script>
<style>
/* .el-collapse-item__wrap{
    border: 0;
}
.el-collapse-item__header{
    border: 0;
} */
.demo-collapse .el-collapse-item__header {
    height: auto;
}

.boder-blue {
    border: 5px solid rgba(0, 106, 255, 0.2);
}

.boder-yellow {
    border: 5px solid rgba(255, 255, 0, 0.3);
}

.boder-orange {
    border: 5px solid rgba(255, 165, 0, 0.2);
}

.boder-red {
    border: 5px solid rgba(255, 0, 0, 0.2);
}

.boder-grey {
    border: 5px solid rgb(70, 108, 163, 0.4);
}

.boder-white {
    border: 5px solid rgb(70, 108, 163, 0.1);
}

.demo-collapse .margin-top>.el-descriptions__header {
    margin: 0;
}

/* .demo-collapse .el-dialog{
    margin: 0 auto;
} */
.box-wdemand .el-descriptions__label {
    font-weight: bold;
}
</style>
